﻿<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>MooTools Demos - MouseEnter</title>
	<link type="text/css" rel="Stylesheet" href="mouseenter.css" />
</head>
<body>

<div id="myElement"></div>
<div class="help floated">
	<strong>Why?</strong> MooTools features mouseenter and mouseleave because mouseover/mouseout sometimes
	just does not work as expected. Mouseenter only fires once you enter the element and
	does not fire again if your mouse crosses over children of the element.
</div>
<div style="clear: both;">
	<!-- space -->
</div>
<h2>Menu Example</h2>
<p>
	This example explains how to open a menu-like element on mouseenter and
	how it closes again on mouseleave.
</p>
<div id="myOtherElement">
	<span><strong>Menu</strong></span>
	<div>
		<a href="#">Menuelement 1</a>
		<a href="#">Menuelement 2</a>
		<a href="#">Menuelement 3</a>
	</div>
</div>


<div id="menuID2">
	<span><strong>Menu</strong></span>
	<div>
		<a href="#">Menuelement 1</a>
		<a href="#">Menuelement 2</a>
		<a href="#">Menuelement 3</a>
	</div>
</div>

	<script type="text/javascript" charset="utf-8" src="../../../src/loader.js"></script>
	<script type="text/javascript">		HmJS.$JSManager.$basepath = '../../../src/';</script>
	<script type="text/javascript" charset="utf-8" src="../../../src/demo/action/moo/events/mouseenter.js"></script>
</body>
</html>
